<template>
	<view class="">
		<nav-bar isBlack title="购物车"></nav-bar>
		<view class="carts">
			<view class="cart-elem" v-for="(c,ci) in carts" :key="'cart'+ci">
				<radio color="red" :checked="c.checked" @click="$store.commit('setGoodsChecked',ci)" />
				<van-card @click="goGoodsDetail(c.goods_id)" :price="c.price/100" :desc="c.goods_descript"
					:title="c.name" :thumb="c.thumb" :origin-price="c.pre_price">
					<template #num>
						<view class="cart-num">
							<view class="cart-num-btn" @click="$store.commit('subGoodsNum',ci)">-</view>
							<view class="cart-num-btn">{{c.num}}</view>
							<view class="cart-num-btn" @click="$store.commit('addGoodsNum',ci)">+</view>
						</view>
					</template>
				</van-card>
			</view>
		</view>
		<van-submit-bar :price="$store.getters.cartGoodsTotal" button-text="提交订单" @submit="onSubmit">
			<radio color="red" :checked="$store.getters.cartAllChecked"
				@click="clickAll($store.getters.cartAllChecked)" />
		</van-submit-bar>
		<!-- 底部导航栏 -->
		<van-tabbar v-model="active" @change="onChange">
			<van-tabbar-item icon="home-o">首页</van-tabbar-item>
			<van-tabbar-item icon="search">分类</van-tabbar-item>
			<van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
			<van-tabbar-item icon="setting-o">个人中心</van-tabbar-item>
		</van-tabbar>
	</view>
</template>

<script>
	import {
		ref
	} from 'vue';
	import Storage from '@/untils/storage.js'
	export default {
		setup() {
			const active = ref(2);
			const onChange = (index) => {
				console.log(index);
				let router = ['index', 'cate', 'cart', 'user']
				uni.reLaunch({
					url: `/pages/${router[index]}/index`
				})
			};
			return {
				active,
				onChange,
			}
		},
		data() {
			return {
				// carts: []
			}
		},
		computed: {
			// cartGoodsTotal() {
			// 	return this.$store.getters.cartGoodsTotal;
			// }
			carts() {
				if (this.$store.state.cart.cart.length == 0 && Storage.get('cartGoods').length > 0) {
					// 缓存中的数据同步到状态管理器中
					this.$store.commit("storageToCart", Storage.get('cartGoods'))
				}
				return this.$store.state.cart.cart
			}
		},
		onLoad() {
			// this.carts = this.$store.state.cart.cart
		},
		methods: {
			add() {
				this.$store.commit("addGoods")
			},
			clickAll(statue) {
				this.$store.commit('changeCartChecked', statue)
			},
			onSubmit(e) {

			},
			goGoodsDetail(id) {
				uni.navigateTo({
					url: '/pages/goods/detail?id=' + id
				})
			}
		},
	}
</script>

<style>
	.cart-num {
		display: flex;
	}

	.cart-num .cart-num-btn {
		width: 40upx;
		height: 40upx;
		text-align: center;
		line-height: 46upx;
		border: 1upx solid #ccc;
	}

	.carts {
		width: 700upx;
		margin: 25upx;
		background: #fff;
	}

	.cart-elem {
		display: flex;
		width: 100%;
	}

	.cart-elem radio {
		margin: 80upx 20upx;
	}

	.cart-elem .van-card {
		width: 600upx;
		background: #fff;
	}

	.van-submit-bar {
		bottom: 96upx;
	}
</style>
